import React from 'react'
import Loading from '@/components/Loading'

import { Layout, Tabs, TabPane } from '@douyinfe/semi-ui'
import { Header, Footer, Content } from '@/components/layout'
import { motion, AnimatePresence } from 'framer-motion'
import AnimatePage from './components/layout/AnimatePage'
import bg1 from '@/assets/bg1.png'
import bg2 from '@/assets/bg2.jpg'

const ViewMask = styled.div`
  height: 100%;
  /* display: flex; */
  justify-content: center;
  align-items: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  transition-timing-function: ease-out;
`
const App = () => {
  const location = useLocation()
  const isDark = useCommonStore((state) => state.isDark)
  useEffect(() => {
    setTimeout(() => LDAPI.onAppInit(), 500)
  }, [])
  return (
    <>
      <Layout>
        <Header />
        <ViewMask style={{ backgroundImage: `url(${isDark ? bg1 : bg2})` }}>
          <React.Suspense fallback={<Loading />}>
            <AnimatePresence key={location.key}>
              <AnimatePage disable={true}>
                <Outlet />
              </AnimatePage>
            </AnimatePresence>
          </React.Suspense>
        </ViewMask>
      </Layout>
    </>
  )
}

export default App
